﻿﻿<template>

  <div>

    <el-card class="box-card" style="width: 50%; margin: 0 auto; ">

      签约量

      <div id="bar" style="width: 100%; height: 400px"></div>

    </el-card>

    <el-table

        :data="tableData"

        stripe

        show-summary

        :summary-method="getSummaries"

        style="width: 100%"

    >

      <el-table-column

          prop="date"

          label="日期"

          width="180"

      ></el-table-column>

      <el-table-column

          prop="targetSignCount"

          label="目标签约量"

          width="180"

      ></el-table-column>

      <el-table-column

          prop="actualSignCount"

          label="实际签约量"

          width="180"

      ></el-table-column>

      <el-table-column

          prop="completionRate"

          label="签约完成率"

          width="180"

      >

        <template v-slot="{ row }">

          {{ row.completionRate*100 }}%

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>



<script>

import axios from 'axios';

import * as echarts from 'echarts';

export default {

  data() {

    return {

      tableData:[]

    }

  },

  methods:{

    getSummaries(param) {

      const { columns, data } = param;

      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }

        const values = data.map(item => Number(item[column.property]));

        // console.log(values)

        // console.log(index)

        if (!values.every(value => isNaN(value))) {

          if (index===3){

            let a=sums[index-2]

            let b=sums[index-1]

            let c=a/100

            // console.log(a+'  '+b+' '+c)

            sums[index] = (b/c).toFixed(2)+'%'

          }else {

            sums[index] = values.reduce((prev, curr) => {

              //代表每个元素

              const value = Number(curr);

              if (!isNaN(value)) {

                // console.log(prev+' '+curr)

                return prev + curr;

              } else {

                return prev;

              }

            }, 0);

          }

        } else {

          sums[index] = 'N/A';

        }

      });

      return sums;

    },

    findAllSignPerformance(){

      axios.get("http://localhost:8205/signPerformance/findAllSignPerformance ").then(res=>{

        this.tableData=res.data.data

      })

    },

    initBarData(){

      axios.get("http://localhost:8205/signPerformance/statistics/bar").then(res=>{

        let actualList=res.data.actualList;

        let targetList=res.data.targetList;

        let titleList=res.data.titleList;

        this.initBar(actualList,targetList,titleList)

      })

    },

    initBar(actualList,targetList,titleList){
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      let option;
      const rawData = [

        actualList,

        targetList

      ];

      const totalData = [];

      for (let i = 0; i < rawData[0].length; ++i) {

        let sum = 0;

        for (let j = 0; j < rawData.length; ++j) {

          sum += rawData[j][i];

        }

        totalData.push(sum);

      }

      const grid = {

        left: 100,

        right: 100,

        top: 50,



        bottom: 50

      };

      const series = ['完成', '未完成'].map((name, sid) => {

        return {

          name,

          type: 'bar',

          stack: 'total',

          barWidth: '60%',

          label: {

            show: true,

            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'

          },

          data: rawData[sid].map((d, did) =>

              totalData[did] <= 0 ? 0 : d / totalData[did]

          )

        };

      });

      option = {

        legend: {

          selectedMode: false

        },

        grid,

        yAxis: {

          type: 'value'

        },

        xAxis: {

          type: 'category',

          data: titleList

        },

        series

      };

      option && myChart.setOption(option);

    }

  },

  created() {

    this.findAllSignPerformance()

  },

  mounted() {

    this.initBarData()

  }

}

</script>



<style scoped>



</style>
